<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>登录页面</title>
    <script src="js/node_modules/jquery/dist/jquery.js"></script>
    <style>
        /* 样式表 */

        body {

            font-family: Arial, sans-serif;

            background-color: #f2f2f2;
        }

          form {

              background-color: #fff;

              border: 1px solid #ccc;

              padding: 20px;
              margin: 50px auto;

              max-width: 400px;
          }

          label {

              display: block;

              margin-bottom: 10px;
          }

          input[type="text"], input[type="password"] {

              width: 100%;

              padding: 10px;

              margin-bottom: 20px;

              border: 1px solid #ccc;

              border-radius: 4px;

              box-sizing: border-box;
          }

          input[type="submit"], input[type="reset"] {

              background-color: #4CAF50;

              color: #fff;

              padding: 10px 20px;

              border: none;

              border-radius: 4px;

              cursor: pointer;
          }

          input[type="submit"]:hover, input[type="reset"]:hover {

              background-color: #3e8e41;
          }
    </style>

</head>
<body>
<form>
    <label for="username">账号：</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input name="11" type="button" class="clickbutton" value="通过"/>
</form>
<script>
    // JavaScript 代码
    console.log($);
    const $form = $(".formtable");
    const form = document.querySelector('form');
    console.log(form);
    console.log($form);
    console.log($form === form);
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        // 获取到表单中的值
        const username = form.elements.username.value;
        console.log(username);
        // const password = form.elements.password.value;
    });
    form.addEventListener('reset', (event) => {
    });
    console.log($);
    let $button1 = $(".clickbutton");
    $button1.onclick = ()=>{
        console.log($button1);
    }

</script>
</body>
</html>
